<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>大项目管理 - 人力资源管理系统</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .search-form { background: #fff; border: 1px solid var(--border-color); border-radius: 4px; padding: 24px; margin-bottom: 16px; }
        .search-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .form-item { display: flex; align-items: center; }
        .form-label { font-size: 14px; color: var(--text-primary); margin-right: 8px; flex-shrink: 0; width: 70px; text-align: right; }
        .form-input, .form-select { flex: 1; height: 32px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; background: #fff; width: calc(100% - 78px);}
        .search-buttons { display: flex; gap: 16px; }
        .action-buttons { margin-bottom: 16px; display: flex; gap: 12px; }
        .table-container { background: #fff; border-radius: 4px; border: 1px solid var(--border-color);}
        table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1500px;}
        th, td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); text-align: left;}
        th { background: #fafafa; font-weight: 600; color: #232a3b;}
        tr:hover { background: #fafafa;}
        .table-actions button { padding: 4px 12px; border: none; border-radius: 4px; background: #40a9ff; color: #fff; cursor: pointer; font-size: 12px; margin-right: 8px;}
        .table-actions button:last-child { margin-right: 0;}
    </style>
</head>
<body>
    <div class="layout">
        <div class="sidebar" id="sidebar"></div>
        <div class="main">
            <div class="topbar">
                <div class="title">大项目管理</div>
                <div class="user">
                    <span>管理员</span>
                    <img src="https://via.placeholder.com/32x32.png?text=U" alt="用户头像">
                </div>
            </div>
            <div class="content">
                <div class="search-form">
                    <div class="search-form-grid">
                        <div class="form-item">
                            <label class="form-label">项目编号</label>
                            <input type="text" class="form-input" placeholder="请输入项目编号">
                        </div>
                        <div class="form-item">
                            <label class="form-label">项目名称</label>
                            <input type="text" class="form-input" placeholder="请输入项目名称">
                        </div>
                        <div class="form-item">
                            <label class="form-label">客户名称</label>
                            <input type="text" class="form-input" placeholder="请输入客户名称">
                        </div>
                        <div class="form-item search-buttons">
                            <button type="button" class="btn btn-primary">搜索</button>
                            <button type="button" class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary" id="addProjectBtn">新增项目</button>
                    <button class="btn btn-default">批量导入</button>
                    <button class="btn btn-default">批量导出</button>
                </div>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>项目编号</th>
                                <th>项目名称</th>
                                <th>客户名称</th>
                                <th>项目阶段</th>
                                <th>负责人</th>
                                <th>进度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>PJ-001</td>
                                <td>XX集团人力外包</td>
                                <td>XX集团</td>
                                <td>初步沟通</td>
                                <td>李明</td>
                                <td>20%</td>
                                <td class="table-actions">
                                    <button class="edit-btn">分配负责人</button>
                                    <button>进度更新</button>
                                    <button>删除</button>
                                </td>
                            </tr>
                            <!-- 更多项目数据 -->
                        </tbody>
                    </table>
                </div>
                <!-- 新增/编辑项目弹窗，可根据需要添加 -->
                <div id="projectModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1000;background:rgba(0,0,0,0.3);">
                    <div style="background:#fff;width:420px;margin:80px auto 0 auto;padding:32px 24px;border-radius:8px;position:relative;">
                        <div style="font-size:18px;font-weight:600;margin-bottom:24px;" id="projectModalTitle">新增项目</div>
                        <form id="projectForm">
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">项目编号</label>
                                <input type="text" name="code" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">项目名称</label>
                                <input type="text" name="name" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">客户名称</label>
                                <input type="text" name="customer" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">项目阶段</label>
                                <select name="stage" style="width:266px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                                    <option value="初步沟通">初步沟通</option>
                                    <option value="需求确认">需求确认</option>
                                    <option value="方案制定">方案制定</option>
                                    <option value="商务谈判">商务谈判</option>
                                    <option value="签约">签约</option>
                                </select>
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">负责人</label>
                                <input type="text" name="manager" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;">
                            </div>
                            <div style="margin-bottom:16px;">
                                <label style="display:inline-block;width:80px;text-align:right;margin-right:8px;">进度</label>
                                <input type="number" name="progress" min="0" max="100" style="width:260px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;" placeholder="0-100%">
                            </div>
                            <div style="text-align:right;">
                                <button type="button" id="projectModalCancel" style="margin-right:16px;padding:6px 24px;">取消</button>
                                <button type="submit" style="padding:6px 24px;background:#40a9ff;color:#fff;border:none;border-radius:4px;">保存</button>
                            </div>
                        </form>
                        <span id="projectModalClose" style="position:absolute;right:16px;top:16px;cursor:pointer;font-size:20px;">×</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
      // 动态加载 sidebar.html
      fetch('components/sidebar.html')
        .then(response => response.text())
        .then(html => {
          document.getElementById('sidebar').innerHTML = html;
        });
      // 弹窗控制
      const projectModal = document.getElementById('projectModal');
      const addProjectBtn = document.getElementById('addProjectBtn');
      const projectCloseBtn = document.getElementById('projectModalClose');
      const projectCancelBtn = document.getElementById('projectModalCancel');
      const projectModalTitle = document.getElementById('projectModalTitle');
      const projectForm = document.getElementById('projectForm');
      let isProjectEdit = false;

      addProjectBtn.onclick = function() {
          projectModalTitle.textContent = '新增项目';
          projectForm.reset();
          projectModal.style.display = 'block';
          isProjectEdit = false;
      };
      projectCloseBtn.onclick = projectCancelBtn.onclick = function() {
          projectModal.style.display = 'none';
      };
      projectForm.onsubmit = function(e) {
          e.preventDefault();
          // 这里可添加保存逻辑
          projectModal.style.display = 'none';
      };
    </script>
</body>
</html>